<template>
	<view class="container">
		<view class="left-bottom-sign"></view>
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<view class="right-top-sign"></view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">

		
			<view class="input-content" style="margin-top: 100px;">
		<button class="userinfo"  open-type="getPhoneNumber" @click="onGetPhoneNumber" @getphonenumber="onGetPhoneNumber">微信一键登录</button>
			</view>
		

			
		</view>
		
	</view>
</template>

<script>
	import {
		login
	} from "@/server/api.js"
	import {
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				mobile: '',
				password: '',
				logining: false
			}
		},
		onLoad() {

		},
		methods: {
			...mapMutations(['login']),
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			onGetPhoneNumber(e) {
				this.login("eyJhbGciOiJIUzUxMiJ9.eyJ3ZWNoYXRfdXNlcl9rZXk6IjoiZDY5ZDBjODgtZTM0My00MzYxLTgzYWItMGUzM2VmZWQ2MTE5In0.SL9vy4oaOPDuSGykhhwqJzVD1Idlp3rXH7DKBGV9mb8ytVivzxvrJhlpLlsVIC9-fBzogZipRG1hmlgyjNLB5A")
				
					uni.$emit("changeCart", {
						dorm: ""
					})
					uni.navigateBack();
					
				if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权  

					//拒绝授权后弹出一些提示  

				} else { //允许授权  
				
				}
			},
			navBack() {
				uni.navigateBack();
			},
			toRegist() {
				this.$api.msg('去注册');
			},

			async toLogin() {
				this.logining = true;
				const {
					mobile,
					password
				} = this;

				const sendData = {
					mobile,
					password
				};
				const result = await this.$api.json('userInfo');
				if (result.status === 1) {
					this.login(result.data);
					uni.navigateBack();
				} else {
					this.$api.msg(result.msg);
					this.logining = false;
				}
			}
		},

	}
</script>

<style lang='scss'>
	page {
		background: #fff;
	}


	.userinfo {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  color: #fff;
	  margin: 20px;
	  background-color: #e00d0d
	}
	
	.container {
	  padding-top: 115px;
	  position: relative;
	  width: 100vw;
	  height: 100vh;
	  overflow: hidden;
	  background: #fff
	}
	
	.wrapper {
	  position: relative;
	  z-index: 90;
	  background: #fff;
	  padding-bottom: 40rpx
	}
	
	.back-btn {
	  position: absolute;
	  left: 40rpx;
	  z-index: 9999;
	  padding-top: 25px;
	  top: 40rpx;
	  font-size: 40rpx;
	  color: #303133
	}
	
	.left-top-sign {
	  font-size: 120rpx;
	  color: #f8f8f8;
	  position: relative;
	  left: -16rpx
	}
	
	.right-top-sign {
	  position: absolute;
	  top: 80rpx;
	  right: -30rpx;
	  z-index: 95
	}
	
	.right-top-sign:before,
	.right-top-sign:after {
	  display: block;
	  content: "";
	  width: 400rpx;
	  height: 80rpx;
	  background: #b4f3e2
	}
	
	.right-top-sign:before {
	  -webkit-transform: rotate(50deg);
	  transform: rotate(50deg);
	  border-radius: 0 50px 0 0
	}
	
	.right-top-sign:after {
	  position: absolute;
	  right: -198rpx;
	  top: 0;
	  -webkit-transform: rotate(-50deg);
	  transform: rotate(-50deg);
	  border-radius: 50px 0 0 0
	}
	
	.left-bottom-sign {
	  position: absolute;
	  left: -270rpx;
	  bottom: -320rpx;
	  border: 100rpx solid #d0d1fd;
	  border-radius: 50%;
	  padding: 180rpx
	}
	
	.welcome {
	  position: relative;
	  left: 50rpx;
	  top: -90rpx;
	  font-size: 46rpx;
	  color: #555;
	  text-shadow: 1px 0 1px rgba(0, 0, 0, .3)
	}
	
	.input-content {
	  padding: 0 60rpx
	}
	
	.input-item {
	  display: flex;
	  flex-direction: column;
	  align-items: flex-start;
	  justify-content: center;
	  padding: 0 30rpx;
	  background: #f8f6fc;
	  height: 120rpx;
	  border-radius: 4px;
	  margin-bottom: 50rpx
	}
	
	.input-item:last-child {
	  margin-bottom: 0
	}
	
	.input-item .tit {
	  height: 50rpx;
	  line-height: 56rpx;
	  font-size: 26rpx;
	  color: #606266
	}
	
	.input-item input {
	  height: 60rpx;
	  font-size: 30rpx;
	  color: #303133;
	  width: 100%
	}
	
	.confirm-btn {
	  width: 630rpx;
	  height: 76rpx;
	  line-height: 76rpx;
	  border-radius: 50px;
	  margin-top: 70rpx;
	  background: #f72309;
	  color: #fff;
	  font-size: 32rpx
	}
	
	.confirm-btn:after {
	  border-radius: 100px
	}
	
	.forget-section {
	  font-size: 26rpx;
	  color: #4399fc;
	  text-align: center;
	  margin-top: 40rpx
	}
	
	.register-section {
	  position: absolute;
	  left: 0;
	  bottom: 50rpx;
	  width: 100%;
	  font-size: 26rpx;
	  color: #606266;
	  text-align: center
	}
	
	.register-section text {
	  color: #4399fc;
	  margin-left: 10rpx
	}
</style>
